<template>
 <section>
    
    <div class="section-content clearfix">
        <el-col :span="24" class="toolbars" style="padding-bottom: 0px;">
                <el-form @submit.native.prevent :inline="true" >
                    <el-form-item >
                        <el-input v-model="filters.name" placeholder="名称" ></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-input v-model="filters.slaveSn" placeholder="从机号" ></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-input v-model="filters.register" placeholder="数据点" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <!-- <el-button type="primary" @click="filtersCkeck">查询</el-button> -->
                        <el-button type="primary" @click="getUsers">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col> 
            <!--列表-->
            <div style="font-size: 17px;font-weight: bold;margin-bottom: 10px;">
                <!-- 设备模板名称/UI模板名称 -->
               设备模板校验UI
            </div>
            <el-table :data="query"  highlight-current-row v-loading="listLoading" style="width: 100%;">
                <!-- <el-table-column type="selection"> -->
                <!-- </el-table-column> -->
                <el-table-column type="index" label="序号"  width="80" :index="indexMethod">
                </el-table-column>
                <el-table-column align="center" prop="name"  width="200" label="名称" >
                </el-table-column>
                <el-table-column align="center" prop="slaveSn" label="从机号" >
                </el-table-column>
                <el-table-column align="center" prop="register" label="数据点">
                </el-table-column>
                <!-- <el-table-column align="center" prop="cmdName" label="简码名称" >
                </el-table-column> -->
                <el-table-column align="center" prop="remark" label="检验结果" >
                </el-table-column>
            </el-table>
            <!-- 工具条 -->
            <!-- <el-col :span="24" class="toolbar">
                <el-pagination style="float:right;" layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total">
                </el-pagination>
            </el-col> -->
    </div>
 </section>
</template>
<script>
import {
    check_device_template
}from "../../api/api"
export default{
    data(){
        return{
            page: 1,
            total: 0,
            listLoading:false,
            query:[],
            querylist:[],
            filters:{
                name:'',
                slaveSn:'',
                register:'',
            },
            firmlist:''
        }
    },
    methods:{
        indexMethod(index) {
                let num = (this.page - 1) * 10 + index + 1;
                return num;
            },
        getUsers(){
            let para = { 
                name: this.filters.name,
                slaveSn: this.filters.slaveSn,
                register: this.filters.register,
                templageId:sessionStorage.getItem("TemplateId")
            }
            check_device_template(para).then(res => {
                if(res.code == 0){
                    this.query = res.data.list
                    // this.querylist = res.data.list
                    this.total = res.data.totalCount;
                    this.page = res.data.pageNo;
                    this.listLoading = false
                    if(this.filters.name != "" || this.filters.slaveSn != "" || this.filters.register != ""){
                        this.query = []
                        for(let i in res.data.list){
                            // if(res.data.list[i].name == this.filters.name){
                            // console.log(res.data.list[i].name)
                            // console.log(res.data.list[i].name.indexOf(this.filters.name))
                            if(res.data.list[i].name.indexOf(this.filters.name)>=0){
                                if(res.data.list[i].slaveSn.indexOf(this.filters.slaveSn)>=0){
                                    if(res.data.list[i].register.indexOf(this.filters.register)>=0){
                                        this.query.push(res.data.list[i])
                                    }
                                }
                            }
                        }
                    }
                }
            })
        },
        handleCurrentChange(val){
            this.page = val;
            this.getUsers();
        },
        // filtersCkeck(){
        //     this.querylist = []
        //     for(let i in this.query){
        //         if(this.query[i].name == this.filters.name){
        //             this.querylist.push(this.query[i])
        //         }
        //     }
        //     console.log(this.querylist)
        // }
    },
    mounted(){
        this.getUsers()
    },
}
</script>

<style scoped>
.toolbars{
    padding: 10px 0 30px;
    background: #fff
}
</style>